<template>
  <section class="page-container animate-container">
    <img ref="introImg" :src="LogoImg" alt="示例图片" />
    <section ref="header">使用useAnimateCss动画钩子实现动画</section>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue';

import LogoImg from '@/assets/images/logo.png';
import { animateCSS } from '@/utils/index';

const introImg = ref();
const header = ref();

const domAnimate = () => {
  // 对introImg元素应用fadeInRight动画，同样在动画开始前将其显示状态改为可见
  animateCSS(introImg.value, 'fadeInLeft').then(() => {
    console.log('introImg动画结束');
  });
  // 为header元素应用fadeInDown动画
  animateCSS(header.value, 'fadeInUp');
};

onMounted(() => {
  domAnimate();
});
</script>

<style lang="scss" scoped>
.animate-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-right: 18px;
  padding-left: 18px;
}
</style>
